<template>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
            <el-breadcrumb-item>ansible</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <div class="form-box">

            <el-form :model="form" label-width="80px">
                <el-form-item label="执行IP">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.hostip" :value="item.hostip">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主机名">
                    <el-input v-model="behostname" placeholder="远程主机名<随便填>"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="bename" placeholder="连接主机用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="bepasswd" placeholder="远程主机密码"></el-input>
                </el-form-item>
                <el-form-item label="端口">
                    <el-input v-model="beport" placeholder="远程主机端口"></el-input>
                </el-form-item>
                <el-form-item label="执行命令">
                    <el-input v-model="beshell" placeholder="执行命令"></el-input>
                </el-form-item>
            </el-form>

            <el-button type="" @click="implement">执行</el-button>
        </div>
    </div>
</template>

<script>
    import {
        exdata,
        andhoc
    } from '@/utils/common.js';
    export default {
        data() {
            return {
                form: {
                    txt: ""

                },
                options: [],
                value: '',
                behostname: '',
                bename: '',
                bepasswd: '',
                beshell: '',
                beport: ''
            }
        },
        methods: {
            async queryIP() {
                await exdata().then(res => {
                    this.options = res

                })
            },
            async implementData() {
                await exdata().then(res => {

                    this.options = res
                })

            },

            async implement() {
                // 获取上次的参数json的方式传递到后台
                var runData = {
                    hostname: this.behostname,
                    ip: this.value,
                    username: this.bename,
                    password: this.bepasswd,
                    beshell: this.beshell,
                    port: this.beport

                }
                // 接口上传数据
                await andhoc(runData).then(res => {
                    if (res.code == '200') {
                        this.$message(res.msg)
                    }
                    if (res.code == "201") {
                        this.$message(res.msg)
                    }
                })
            }
        },
        mounted() {
            this.queryIP()
        }


    }
</script>